<script setup>
  import { Lock, User } from "@element-plus/icons-vue";

  import { reactive } from "vue";
  import { useUserStoreHook } from "@/store/modules/user-token";
  import router from "@/router";
  let NAVLIST = [
    { name: "首页", path: "/", id: 1 },
    { name: "热门商品", path: "/product", id: 2 },
    { name: "联系我们", path: "/contact", id: 3 },
  ];

  const loginData = reactive({
    user: "",
    password: "",
  });

  const onLoginSubmit = () => {
    // 登录
    useUserStoreHook()
      .logIn(loginData)
      .then((res) => {
        console.log(res);
      })
  };
  const onSubmit = () => {
    // 注册
    router.push("/singin");
  };
</script>

<template>
  <!-- 登录页卡片 -->
  <div class="relative w-full h-screen bg-[#fafafa]">
    <div
      class="absolute left-[50%] translate-x-[-50%] top-[18%] w-[400px] h-[500px] border-[#e7e9e8] border-solid border-[1px] px-[8px] pt-[16px] pb-[8px] flex flex-col items-center rounded-[10px] bg-white box-border"
      style="
        box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.13),
          0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 12px 24px 16px rgba(0, 0, 0, 0.04);
      "
    >
      <img
        class="pt-[14px]"
        src="@/assets/img/logo.png"
        width="160"
        height="80"
      />
      <div class="text-[20px] pt-2">用户登录</div>
      <el-form
        class="w-[300px] pt-[10px]"
        :model="loginData"
        ref="form"
        label-width="80px"
        label-position="top"
        :inline="false"
      >
        <el-form-item>
          <el-input
            class="h-[40px]"
            v-model="loginData.user"
            :prefix-icon="User"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item class="!mb-[22px]">
          <el-input
            class="h-[40px]"
            v-model="loginData.password"
            :prefix-icon="Lock"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- 按钮部分 -->
        <el-form-item class="!mb-[9px]">
          <el-button
            class="w-[100%] !h-[38px] !rounded-[6px] !font-medium"
            @click="onLoginSubmit"
            type="primary"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            @click="onSubmit"
            class="w-[100%] !h-[38px] !rounded-[6px] !font-medium"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 底部链接 -->
      <div class="text-[#a19fa1] w-[100%]">
        <ul class="flex list-none px-[42px]">
          <a
            href=""
            class="text-left flex-1 hover:cursor-pointer hover:text-black"
            ><li>忘记密码</li></a
          >
          <a
            href=""
            class="text-right flex-1 hover:cursor-pointer hover:text-black"
            ><li>遇到问题</li></a
          >
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
  /* 如果有额外的样式，可以在这里添加 */
  a {
    text-decoration: none;
  }
</style>
